import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button } from 'antd';
import { toJS } from 'mobx';
import { WeaTableNew, WeaSwitch } from 'comsMobx';
import { WeaRightMenu, WeaTop, WeaErrorPage, WeaTools, WeaFormItem, WeaSearchGroup, WeaAlertPage } from 'ecCom';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('crmOutResourceStore')
@observer
class OutResourceView extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { location: { query }, crmOutResourceStore } = this.props;
    crmOutResourceStore.getOutResourceDetail(query);
    // const { location,crmOutResourceStore } = props;
  }
  componentWillReceiveProps(nextProps) {

  }
  componentWillUnmount() {
    const { crmOutResourceStore } = this.props;
    crmOutResourceStore.clearStatus();
  }
  render() {
    const { crmOutResourceStore } = this.props;
    const { loading, tableStore, showSearchAd, form, verified, hasRight } = crmOutResourceStore;
    const formParams = form.getFormParams() || {};
    if (verified && !hasRight) {
      return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@6t1lpb`} >
        <div style={{ color: '#000' }}>
          {getLabel(2012, '对不起，您暂时没有权限！')}
        </div>
      </WeaAlertPage>
      );
    }

    if (verified && hasRight) {
      return (
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@hc8viu`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)} >
          <WeaTop
            ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@4np40h`}
            title={getLabel(125931, '外部用户')}
            loading={loading}
            icon={<i className="icon-coms-crm" />}
            iconBgcolor="#96358a"
            buttons={this.getButtons(this.props.ecId || '')}
            buttonSpace={10}
            showDropIcon
            dropMenuDatas={this.getRightMenu()}
            onDropMenuClick={this.onRightMenuClick()}
          >
            {this.getFormParams()}
          </WeaTop>
        </WeaRightMenu>
      );
    }

    return (<div />);
  }
    getButtons=(ecId) => {
      const { baseParams, getOutResourceDetail, saveOutResourceEdit, canEdit } = this.props.crmOutResourceStore;
      const btns = [];

      (canEdit && baseParams.operate == 'view' || baseParams.operate == 'undefined') ? btns.push(
        <Button ecId={`${ecId}_Button@2uzwck@getOutResourceDetail`} type="primary" onClick={() => { getOutResourceDetail({ operate: 'edit', id: baseParams.id }); }}>{getLabel(93, '编辑')}</Button>) :
        canEdit && btns.push(
          <Button ecId={`${ecId}_Button@9mgolj@saveOutResourceEdit`} type="primary" onClick={() => { saveOutResourceEdit({ operation: 'edit', id: baseParams.id }); }}>{getLabel(86, '保存')}</Button>);

      // { baseParams.operate=="view" && btns.push(
      //     <Button type="primary" onClick={()=>{getOutResourceDetail({operate:"edit",id:baseParams.id})}}>{getLabel(93,"编辑")}</Button>)
      // }
      // { baseParams.operate=="edit" && btns.push(
      //     <Button type="primary" onClick={()=>{saveOutResourceEdit({operation:"edit",id:baseParams.id})}}>{getLabel(86,"保存")}</Button>)
      // }
      return btns;
    }
    getRightMenu() {
      const { baseParams, getOutResourceDetail, canEdit } = this.props.crmOutResourceStore;
      const btns = [];
      {
        canEdit && baseParams.operate == 'view' &&
            btns.push({
              icon: <i className="icon-coms-edit" />,
              content: getLabel(93, '编辑'),
              key: 0,
            });
      }
      {
        canEdit && baseParams.operate == 'edit' &&
            btns.push({
              icon: <i className="icon-coms-Preservation " />,
              content: getLabel(86, '保存'),
              key: 1,
            });
      }
      return btns;
    }
    onRightMenuClick(key) {
      const { crmOutResourceStore } = this.props;
      const { baseParams, getOutResourceDetail, saveOutResourceEdit } = crmOutResourceStore;
      if (key == '0') {
        getOutResourceDetail({ operate: 'edit', id: baseParams.id });
      }
      if (key == '1') {
        saveOutResourceEdit({ operation: 'edit', id: baseParams.id });
      }
    }
    getFormParams=() => {
      const { crmOutResourceStore } = this.props;
      const { viewForm, viewFormCondition } = crmOutResourceStore;
      const { isFormInit } = viewForm;
      const group = [];
      isFormInit && toJS(viewFormCondition).map((c, i) => {
        const items = [];
        c.items.map((fields, index) => {
          if (fields.viewAttr == '1' || (fields.conditionType == 'BROWSER' && fields.browserConditionParam.viewAttr == '1')) { fields.hasBorder = true; } // 只读样式控制
          items.push({
            com: (<WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@xdw2li@${fields.domkey[0]}`}
              label={`${fields.label}`}
              labelCol={{ span: `${fields.labelcol}` }}
              error={viewForm.getError(fields)}
              tipPosition="bottom"
              wrapperCol={{ span: `${fields.fieldcol}` }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@rxe68f@${fields.domkey[0]}`} fieldConfig={fields} form={viewForm} />
            </WeaFormItem>),
            colSpan: 1,
          });
        });
        group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@gl4zc1@${i}`} needTigger col={1} title={c.title} showGroup={c.defaultshow} items={items} />);
      });
      return group;
    }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@ordbjc`} msg={props.error ? props.error : getLabel(129417, '服务器运行出错，请联系系统管理员！')} />,
  { error: '' },
)(OutResourceView);
